<template>
  <div>
    <!-- 1.0 导航栏 -->
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 2.0 复用 PostItem 组件 -->
    <PostItem
      v-for="item in list"
      :key="item.id"
      :postData="item"
    />
  </div>
</template>

<script>
import { getStarList } from "@/api";
// 导入组件
import PostItem from "@/components/PostItem.vue";
export default {
  // 注册组件
  components: {
    PostItem,
  },
  data() {
    return {
      list: [],
    };
  },
  created() {
    // 用户名:10010  密码:123 可以看到有 5条收藏数据
    getStarList().then((res) => {
      // console.log(res);
      // this.list = res.data.data;
      // 🧨 我的收藏接口返回的数据中没有 comment_length 属性，PostItem 组件的跟帖展示有问题
      // 解决方案：通过 map 处理后端返回的数据，自己映射添加一个 comment_length 属性即可
      this.list = res.data.data.map((item) => {
        return {
          // 展开对象
          ...item,
          // 添加新的属性 comment_length
          comment_length: item.comments.length,
        };
      });
    });
  },
};
</script>

<style lang="less" scoped>
</style>